<template>
    <div id="ydWode">
<!--        移动端-我的-header-->
        <el-row>
            <el-col :span="6" :xs="6" :offset="0" class="wode-photo">
                <img src="../../assets/3.jpg" alt="">
            </el-col>
            <el-col :span="16" :xs="16" class="wpde-name">
                <h2><router-link to="MyC">这个名字可以用吧</router-link></h2>
                <i>关注 0</i><i>粉丝 0</i>
            </el-col>
        </el-row>
<!--        我的-firstCont-->
        <div class="firstCont">
            <el-row>
                <el-col :span="24" :xs="24" class="jianshuzuan">
                    <el-col :xs="20">
                        <p><i class="layui-icon layui-icon-diamond"></i> 简书钻：0</p>
                    </el-col>
                    <el-col :xs="4">
                        <router-link to="">查看 <i class="el-icon-arrow-right"></i></router-link>
                    </el-col>
                </el-col>
                <el-col :span="6" :xs="6" v-for="(item,index) in list" :key="index" class="yd-user">
                    <router-link :to="{path:item.path}">
                        <i :style="wdstyle" :class="item.Icon"></i>
                        <b :style="wdstyle">{{item.title}}</b>
                        <p :style="wdstyle">{{item.P}}</p>
                    </router-link>
                </el-col>
            </el-row>
        </div>
        <div class="jianshuzhilv">
            <img src="../../assets/jianshuzhilv.png" alt="">
        </div>
        <div class="lastCont">
            <el-row>
                <li class="conttitle" v-for="(items,Isi) in lists" :key="Isi">
                    <router-link :to="{path:items.paths}">
                        <el-col :span="23" :xs="23">
                            <el-col :span="18" :xs="18"><p>{{items.contTitle}}</p></el-col>
                            <el-col :span="6" :xs="6">{{items.contText}}</el-col>
                        </el-col>
                        <el-col :span="1" :xs="1">
                            <i class="el-icon-arrow-right"></i>
                        </el-col>
                    </router-link>
                </li>
                <li class="yd-yejianmoshi">
                    <el-col :span="20" :xs="20">
                        <p>夜间模式</p>
                    </el-col>
                    <el-col :span="4" :xs="4">
                        <el-switch @change="changeStyle($event)" style="float: right;width: 100%" v-model="value" active-color="#409eff" inactive-color="#ff4949"></el-switch>
                    </el-col>
                </li>
                <router-link to="login-dl">
                    <li class="yd-yejianmoshi">
                        <el-col :span="20" :xs="23">
                            <p>退出登录</p>
                        </el-col>
                        <el-col :span="4" :xs="1">
                            <i style="color: #969696" class="el-icon-arrow-right"></i>
                        </el-col>
                    </li>
                </router-link>
            </el-row>
        </div>
        <Footers class="hidden-sm-and-up"/>
    </div>
</template>

<script>
    import Footers from '../Footers'
    export default ({
        name:'ydWode',
        data(){
            return{
                value:'false',
                list:[
                    {path:'shoucang',Icon:'el-icon-tickets',title:'收藏文章',P:'3篇收藏'},
                    {path:'scgz',Icon:'el-icon-s-management',title:'我关注的',P:''},
                    {path:'xihuan',Icon:'el-icon-star-off',title:'赞和收藏',P:''},
                    {path:'yigouneirong',Icon:'layui-icon layui-icon-dollar',title:'已购内容',P:'领简书钻'},
                ],
                wdstyle:{
                    textAlign:'center',
                    display:'block',
                    width:'100%'
                },
                lists:[
                    {paths:'/qianbao',contTitle:'我的钱包',contText:'0张优惠券'},
                    {paths:'/MyC',contTitle:'我的专题/文集',contText:''},
                    {paths:'/mysetting',contTitle:'设置',contText:''},
                    {paths:'/bangzhuCont',contTitle:'帮助与反馈',contText:'有问题找这里'},
                ]
            }
        },
        methods:{
            changeStyle($event) {
                // console.log($event)
                if ($event == true) {
                    var div = document.createElement('cover');
                    div.id = "cover"
                    div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid rgba(0,0,0,0.5);z-index:100;');
                    document.body.appendChild(div);
                } else if ($event == false) {
                    // eslint-disable-next-line no-redeclare
                    var div = document.getElementById('cover');
                    div.parentNode.removeChild(div);
                }
            }
        },
        components:{
            Footers
        }
    })
</script>

<style scoped>
    #ydWode{
        background-color: #f9f9f9;
        padding: 30px 5% 20px 5%;
    }
    #ydWode .wode-photo img{
        width: 65px;
        border-radius: 50%;
        height: auto;
    }
    .wpde-name{
        line-height: 35px;
        margin-bottom: 20px;
    }
    .wpde-name h2 a{
        font-size: 20px;
        color: #333333;
    }
    .wpde-name i{
        font-size: 13px;
        color: #969696;
        margin-right: 20px;
    }
    .firstCont{
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0,0,0,.1);
        border: 1px solid #eeeeee;
        border-radius: 5px;
        padding:20px 10px;
    }
    .firstCont .jianshuzuan{
        padding-bottom: 10px;
        border-bottom: 1px solid #b9b9b9;
    }
    .jianshuzuan .el-col-xs-20 {
        font-size: 14px;
        color: #333333;
    }
    .jianshuzuan .el-col-xs-20 p>i{
        color: #ea6f5a !important;
    }
    .jianshuzuan .el-col-xs-4 a{
        font-size: 12px;
        color: #969696;
    }
    .lastCont{
        margin-left: -6%;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 8px rgba(0,0,0,.1);
        border: 1px solid #eeeeee;
        /*border-radius: 5px;*/
        padding: 20px 5% 60px 5%;
    }
    .yd-user{
        color: #333333;
        font-size: 13px;
        margin-top: 20px;
    }
    .yd-user i{
        color: #ea6f5a;
        font-size: 24px;
        margin-bottom: 10px;
    }
    .yd-user:nth-of-type(5) i{
        font-size: 22px;
    }
    .yd-user p{
        margin-top: 5px;
        font-size: 12px;
        color: #969696;
    }
    .jianshuzhilv img{
        display: block;
        width: 100%;
        height: auto;
        border-radius: 5px;
        margin: 20px 0 20px 0;
    }
    .conttitle a ,.yd-yejianmoshi{
        padding: 15px 0 5px 0;
        display: block;
        height: 30px;
        font-size: 15px;
        color: #333333;
        border-bottom: 1px solid #b9b9b9;
    }
    .conttitle .el-col-xs-6 {
        font-size: 12px;
        color: #969696;
        text-align: right;
    }
    .conttitle .el-col-xs-1{
        color: #969696;
    }
</style>